<template>
  <el-dialog
    title="详情"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="75%">
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      height="460"
      style="width: 100%;">
      <el-table-column
        prop="vnfId"
        header-align="center"
        align="center"

        label="VNF标识">
      </el-table-column>
      <el-table-column
        prop="vnfName"
        header-align="center"
        align="center"

        label="VNF名称">
      </el-table-column>
      <el-table-column
        prop="vnfType"
        header-align="center"
        align="center"
        label="VNF类型">
      </el-table-column>
      <!-- <el-table-column
        prop="params"
        header-align="center"
        align="center"
        label="参数">
      </el-table-column> -->
      <el-table-column
        prop="state"
        header-align="center"
        align="center"
        label="状态">
        <!-- <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0" size="small">成功</el-tag>
          <el-tag v-else @click.native="showErrorInfo(scope.row.logId)" size="small" type="danger" style="cursor: pointer;">失败</el-tag>
        </template> -->
      </el-table-column>
      <el-table-column
        prop="stateMessage"
        header-align="center"
        align="center"
        label="备注">
      </el-table-column>
      <!-- <el-table-column
        prop="createTime"
        header-align="center"
        align="center"
        width="180"
        label="执行时间">
      </el-table-column> -->
    </el-table>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dataList: [],
        dataListLoading: false
      }
    },
    methods: {
      init (val) {
        this.visible = true
        this.getDataList(val)
      },
      // 获取数据列表
      getDataList (val) {
        this.dataListLoading = false
        this.$http({
          url: this.$http.adornUrl(`/orderAlarm/vnf/${val}`),
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            let newList =  []
            newList = data.vnfs
            for(let i = 0; i < newList.length; i++) {
              newList[i].vnfType = newList[i].vnfType == '0' ? '防火墙':'VPN'
            }
            this.dataList = newList
          }
          this.dataListLoading = false
        })
      }
    }
  }
</script>



